<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-16 22:32:41
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-20 20:35:51
-->

<template>
  <div class="Echarts-container" ref="echartsContainer"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const echartsContainer = ref(null);
onMounted(() => {
  const myChart = echarts.init(echartsContainer.value, "dark");
  const option = {
    title: {
      text: "近日车辆状态",
    },
    grid: {
      left: "7%",
      right: "7%",
      bottom: "5%",
      top: "17%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["8.13", "8.14", "8.15", "8.16", "8.17"],
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: getLegend(),
    series: [
      {
        name: "正常车辆",
        data: [200, 180, 210, 225, 240],
        type: "bar",
      },
      {
        name: "缺电车辆",
        data: [80, 70, 60, 50, 40],
        type: "bar",
      },
      {
        name: "故障车辆",
        data: [15, 10, 15, 10, 12],
        type: "bar",
      },
    ],
  };
  myChart.setOption(option);
});
const getLegend = () => {
  return {
    data: ["正常车辆", "缺电车辆", "故障车辆"],
    icon: "rect",
    orient: "horizontal",
    left: "right",
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: "#fff",
      fontSize: "12px",
    },
  };
};
</script>
<style scoped>
.Echarts-container {
  height: 205px;
  padding: 10px;
}
</style>
